<template>
  <a-modal
    :title="'模版详情'"
    :visible="true"
    width="60%"
    :footer="null"
    @cancel="reset"
  >
    <div class="main">
      <a-list
      >
        <a-list-item
        >
        <div class="card">
          模版名称：{{name}}
        </div>
          <div class="card">
          货季：<span v-for="item in goodsSeason" :key="item" style="margin-right:5px">{{item}}</span>
          </div>
          <div class="card">
          品牌：<span v-for="item in brandList" :key="item" style="margin-right:5px">{{item}}</span>
          </div>
          <div class="card">
            角色名称：{{roleName}}
          </div>
        </a-list-item>
      </a-list>
      <a-table
        bordered
        :loading="loading"
        :pagination="pagination"
        :columns="columns"
        :data-source="fieldConfigList"
        @change="handleTableChange"
        :scroll="{ x: true }"
      >
 <template
          slot="main"
          slot-scope="txt, record"
        >
          <div style="text-align: center;">
            <a-switch
              :default-checked="record.mainPage==1"
              @change="choose(record, $event ? ischoose : noChoose,1)"
            >
              <a-icon
                slot="checkedChildren"
                type="check"
              />
              <a-icon
                slot="unCheckedChildren"
                type="close"
              />
            </a-switch>
          </div>
        </template>
        <template
          slot="detail"
          slot-scope="txt, record"
        >
          <div style="text-align: center;">
            <a-switch
              :default-checked="record.detailPage==1"
              @change="choose(record, $event ? ischoose : noChoose,2)"
            >
              <a-icon
                slot="checkedChildren"
                type="check"
              />
              <a-icon
                slot="unCheckedChildren"
                type="close"
              />
            </a-switch>
          </div>
        </template>
        <template
          slot="print"
          slot-scope="txt, record"
        >
          <div style="text-align: center;">
            <a-switch
              :default-checked="record.printPage==1"
              @change="choose(record, $event ? ischoose : noChoose,3)"
            >
              <a-icon
                slot="checkedChildren"
                type="check"
              />
              <a-icon
                slot="unCheckedChildren"
                type="close"
              />
            </a-switch>
          </div>
        </template>
      </a-table>
    </div>

  </a-modal>
</template>

<script>
import { postAction } from '@/api/manage'
import { pattern } from '@api/pattern/index'
const columns = [

  {
    title: '字段名称',
    dataIndex: 'fieldName',
  },
  {
    title: '是否主页显示',
    dataIndex: 'mainPage',
    scopedSlots: { customRender: 'main' },
  },
  {
    title: '是否详情页显示',
    dataIndex: 'detailPage',
    scopedSlots: { customRender: 'detail' },
  },
  {
    title: '是否打印页显示',
    dataIndex: 'printPage',
    scopedSlots: { customRender: 'print' },
  },
]
export default {
  components: {},

  props: {
    record: {
      type: Object,
      default: null,
    },
  },

  data() {
    return {
      urlKey: 'record',
      columns,
      roleId: '',
      roleName: '',
      brand: '',
      goodsSeason: [],
      patt: 'api/gateway/basemgt-op',
      loading: true,
      name: '',
      fieldList: [],
      fieldConfigList: [],
      brandList:[],
      ischoose: 1,
      noChoose: 0,
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40'],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total) => `共 ${total} 条记录`,
        itemRender: (current, type, originalElement) => {
          if (type === 'prev') {
            return <a>上一页</a>
          } else if (type === 'next') {
            return <a>下一页</a>
          }
          return originalElement
        },
      },
    }
  },

  created() {
    const { record } = this.$props
    if (record) {
      this.templateId = record.id
      this.name = record.name
      this.brand = record.brand
      this.roleName = record.roleName
      this.goodsSeason = record.goodsSeason
    }
  },
  mounted() {
    this.loadData()
    this.getFieldList()
    this.getRoleList()
  },
  methods: {
    getFieldList() {
      const params = {}
      postAction(`${this.patt}/field/page`, params).then((data) => {
        if (data.code == 200) {
          this.fieldList = data.data.records
        } else {
          this.$message.warning(data.msg)
        }
        this.loading = false
      })
    },
    getRoleList() {
      const params = {}
      postAction(`${this.patt}/role/list`, params).then((data) => {
        if (data.code == 200) {
          this.roleList = data.data.records
          console.log(this.roleList);
          this.roleList.map((item) => {
            if (item.name === this.roleName) {
              this.roleId = item.id
              console.log(this.roleId);
            }
          })
        } else {
          this.$message.warning(data.msg)
        }
        this.loading = false
      })
    },
    choose(record, type, operation) {
      console.log(record,type,operation);
      if (operation == 1) {
        this.fieldConfigList.map((item) => {
          if (item.fieldId == record.fieldId) {
            item.mainPage = type
            return
          }
        })
      }
      if (operation == 2) {
        this.fieldConfigList.map((item) => {
          if (item.fieldId == record.fieldId) {
            item.detailPage = type
            return
          }
        })
      }
      if (operation == 3) {
        this.fieldConfigList.map((item) => {
          if (item.fieldId == record.fieldId) {
            item.printPage = type
            return
          }
        })
      }
      this.submit()
    },
    reset() {
      this.$emit('close')
    },
    handleTableChange(pagination) {
      this.pagination = pagination
      this.loadData()
    },
    loadData() {
      const params = {
        templateId: this.templateId,
        current : this.pagination.current,
        size : this.pagination.pageSize
      }
      postAction(`${this.patt}/template/info`, params).then((data) => {
        if (data.code == 200) {
          this.name = data.data.name
          this.brandList = data.data.brandList
          this.roleName = data.data.roleName
          this.goodsSeason = data.data.goodsSeason
          this.fieldConfigList = data.data.fieldConfigList
        } else {
          this.$message.warning(data.msg)
        }
        this.loading = false
      })
    },
    submit() {
      var params = {
        brand:this.brand,
        goodsSeason: this.goodsSeason,
        name: this.name,
        roleId: this.roleId,
        templateId: this.templateId,
        fieldConfigList:this.fieldConfigList
      }
      console.log(params)
      const api = `${this.patt}/template/update`
      this.$http({
        url: api,
        method: 'post',
        data: params,
      }).then((data) => {
        if (data.code == 200) {
          this.$message.success('修改成功！')
        } else {
          this.$message.warning(data.msg)
        }
      })
    },
  },
}
</script>

<style scoped>
.main .card{
  width: 180px;
  text-align: center;
}
</style>>

